<template>
  <div class="fixmessage">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="80px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="旧密码" prop="user" >
        <el-input v-model="ruleForm.user" placeholder="请输入你的旧密码">
        </el-input>
      </el-form-item>

      <el-form-item label="新密码" prop="password" >
        <el-input v-model="ruleForm.password" placeholder="请输入你修改的密码">
        </el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="passwordtwo" >
        <el-input v-model="ruleForm.passwordtwo" placeholder="请输入你修改的密码">
        </el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确认
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'


const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive({
  user: '',
  password: '',
  passwordtwo: ''
})

const rules = reactive({
  user: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'change',
    }, 
  ],
  passwordtwo: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'change',
    }, 
  ]
  
})

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style lang="less" scoped>
.fixmessage {
  margin: 30px 500px 0 0 ;
}
</style>